<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        /* 顶部标题行 */
        .header {
            height: 60px;
            background-color: #2c3e50;
            color: white;
            display: flex;
            align-items: center; 
            padding: 0 20px;
            border-bottom: 1px solid #34495e;
        }
        
        .logo {
            width: 170px;
            height: 50px;
            border-radius: 5px;
            margin-right: 15px;
            overflow: hidden;
            display: flex;
            justify-content: center; /* 水平居中 */
        }
        
        .logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .title {
            flex-grow: 1;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        
        /* 主内容区 */
        .content {
            display: flex;
            flex-grow: 1;
            overflow: hidden;
        }
        
        /* 左侧菜单区 */
        .menu-container {
            width: 200px;
            background-color: #34495e;
            color: white;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: width 0.3s ease;
            overflow: hidden;
        }
        
        .menu-container.collapsed {
            width: 20px !important; /* 使用!important确保折叠状态优先 */
        }
        
        /* 菜单标题 */
        .menu-title {
            padding: 15px 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #2c3e50;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .menu-title .toggle-icon {
            transition: transform 0.3s ease;
        }
        
        .menu-container.collapsed .menu-title {
            justify-content: center;
            padding: 15px 0;
        }
        
        .menu-container.collapsed .menu-title span:not(.toggle-icon) {
            display: none;
        }
        
        /* 一级菜单 */
        .menu-item {
            padding: 12px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #2c3e50;
            white-space: nowrap;
        }
        
        .menu-item:hover {
            background-color: #3d566e;
        }
        
        .menu-item.active {
            background-color: #3498db;
        }
        
        .menu-item .menu-text {
            display: flex;
            align-items: center;
        }
        
        .menu-item .menu-text i {
            margin-right: 8px;
        }
        
        .menu-item .arrow-icon {
            transition: transform 0.3s ease;
        }
        
        .menu-item.expanded .arrow-icon {
            transform: rotate(90deg);
        }
        
        .menu-container.collapsed .menu-item {
            justify-content: center;
            padding: 12px 0;
        }
        
        .menu-container.collapsed .menu-item .menu-text span,
        .menu-container.collapsed .menu-item .arrow-icon {
            display: none;
        }
        
        /* 二级菜单 */
        .submenu {
            list-style: none;
            background-color: #2c3e50;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.3s ease;
        }
        
        .menu-item.expanded + .submenu {
            max-height: 500px;
        }
        
        .submenu li {
            padding: 10px 10px 10px 35px;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .submenu li:hover {
            background-color: #3d566e;
        }
        
        .submenu li.active {
            background-color: #2980b9;
        }
        
        .menu-container.collapsed .submenu li {
            padding-left: 10px;
            text-align: center;
        }
        
        .menu-container.collapsed .submenu li span {
            display: none;
        }
        
        /* 菜单宽度调节手柄 */
        .resize-handle {
            width: 5px;
            height: 100%;
            background-color: #2c3e50;
            cursor: col-resize;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 10;
        }
        
        /* 右侧工作区 */
        .work-area {
            flex-grow: 1;
            padding: 20px;
            background-color: #ecf0f1;
            overflow: auto;
        }
        
        /* 加载内容样式 */
        .page-content {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            min-height: calc(100% - 40px);
        }
    </style>
    <script src="./js/ajax.js"></script>
	<script src="./js/uri.js"></script> 
	<script src="./js/template-web.js"></script> 
</head>

<script id="menuTemplate">
    
</script>
	<div class="menu-title" id="menuToggle">
                <span>主菜单</span>
                <span class="toggle-icon">《</span>
            </div>
            
            <!-- 一级菜单1 -->
            <div class="menu-item" data-menu="data">
                <div class="menu-text">
                    <i>📊</i>
                    <span>数据分析</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="data-overview">数据概览</li>
                <li sub-menu-id="data-analysis">数据分析</li>
                <li sub-menu-id="data-report">数据报表</li>
            </ul>
            
            <!-- 一级菜单2 -->
            <div class="menu-item" data-menu="doc">
                <div class="menu-text">
                    <i>📝</i>
                    <span>文档管理</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="doc-list">文档列表</li>
                <li sub-menu-id="doc-upload">文档上传</li>
                <li sub-menu-id="doc-category">文档分类</li>
            </ul>
            
            <!-- 一级菜单3 -->
            <div class="menu-item" data-menu="system">
                <div class="menu-text">
                    <i>⚙️</i>
                    <span>系统设置</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="sys-basic">基本设置</li>
                <li sub-menu-id="sys-user">用户管理</li>
                <li sub-menu-id="sys-role">角色权限</li>
                <li sub-menu-id="sys-log">系统日志</li>
            </ul>
            
            <div class="resize-handle" id="resizeHandle"></div>
            
<body>
    <!-- 顶部标题行 -->
    <div class="header">
        <div class="logo">
            <img src="img/logo.jpg" alt="公司Logo">
        </div>
        <div class="title">系统标题</div>
        <div><button id="exitButton">&nbsp;退&nbsp;出&nbsp;</button></div>
    </div>
    
    <!-- 主内容区 -->
    <div class="content">
        <!-- 左侧菜单区 -->
        <div class="menu-container" id="menuContainer">
            <div class="menu-title" id="menuToggle">
                <span>主菜单</span>
                <span class="toggle-icon">《</span>
            </div>
            
            <!-- 一级菜单1 -->
            <div class="menu-item" data-menu="data">
                <div class="menu-text">
                    <i>📊</i>
                    <span>数据分析</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="data-overview">数据概览</li>
                <li sub-menu-id="data-analysis">数据分析</li>
                <li sub-menu-id="data-report">数据报表</li>
            </ul>
            
            <!-- 一级菜单2 -->
            <div class="menu-item" data-menu="doc">
                <div class="menu-text">
                    <i>📝</i>
                    <span>文档管理</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="doc-list">文档列表</li>
                <li sub-menu-id="doc-upload">文档上传</li>
                <li sub-menu-id="doc-category">文档分类</li>
            </ul>
            
            <!-- 一级菜单3 -->
            <div class="menu-item" data-menu="system">
                <div class="menu-text">
                    <i>⚙️</i>
                    <span>系统设置</span>
                </div>
                <span class="arrow-icon">▶</span>
            </div>
            <ul class="submenu">
                <li sub-menu-id="sys-basic">基本设置</li>
                <li sub-menu-id="sys-user">用户管理</li>
                <li sub-menu-id="sys-role">角色权限</li>
                <li sub-menu-id="sys-log">系统日志</li>
            </ul>
            
            <div class="resize-handle" id="resizeHandle"></div>
        </div>
        
        <!-- 右侧工作区 -->
        <div class="work-area" id="workArea">
            <div class="page-content" id="pageContent">
                <h2>欢迎使用系统</h2>
                <p>请从左侧菜单选择功能</p>
            </div>
        </div>
    </div>

    <script>
    
    function initDesk(){
    	document.addEventListener('DOMContentLoaded', function() {
            const menuContainer = document.getElementById('menuContainer');
            const menuToggle = document.getElementById('menuToggle');
            const resizeHandle = document.getElementById('resizeHandle');
            const menuItems = document.querySelectorAll('.menu-item');
            const submenuItems = document.querySelectorAll('.submenu li');
            const pageContent = document.getElementById('pageContent');
            
            // 存储原始宽度
            let originalWidth = menuContainer.offsetWidth;
            
            // 菜单折叠/展开功能
            menuToggle.addEventListener('click', function() {
                const isCollapsed = menuContainer.classList.toggle('collapsed');
                
                // 更新箭头方向
                const icon = this.querySelector('.toggle-icon');
                icon.textContent = isCollapsed ? '》' : '《';
                
                // 如果是展开状态，恢复原始宽度
                if (!isCollapsed && originalWidth) {
                    menuContainer.style.width = originalWidth + 'px';
                }
                
                // 折叠时关闭所有二级菜单
                if (isCollapsed) {
                    document.querySelectorAll('.menu-item.expanded').forEach(item => {
                        item.classList.remove('expanded');
                    });
                }
            });
            
            // 一级菜单点击事件 - 展开/折叠二级菜单
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 如果菜单是折叠状态，只展开不折叠
                    if (menuContainer.classList.contains('collapsed')) {
                        // 先关闭所有已展开的菜单
                        document.querySelectorAll('.menu-item.expanded').forEach(i => {
                            i.classList.remove('expanded');
                        });
                        // 展开当前菜单
                        this.classList.add('expanded');
                        return;
                    }
                    
                    // 切换展开状态
                    this.classList.toggle('expanded');
                    
                    // 移除其他菜单的active状态
                    menuItems.forEach(i => {
                        if (i !== this) {
                            i.classList.remove('active');
                            i.classList.remove('expanded');
                        }
                    });
                    
                    // 设置当前菜单active状态
                    this.classList.add('active');
                });
            });
            
            // 二级菜单项点击事件
            submenuItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有active类
                    submenuItems.forEach(i => i.classList.remove('active'));
                    // 给当前项添加active类
                    this.classList.add('active');
                    
                    // 加载对应页面内容
                    const subMenuId = this.getAttribute('sub-menu-id');
                    loadPage(subMenuId);
                    
                    // 如果是折叠状态，点击后自动展开菜单
                    if (menuContainer.classList.contains('collapsed')) {
                        menuContainer.classList.remove('collapsed');
                        menuToggle.querySelector('.toggle-icon').textContent = '❮';
                    }
                });
            }); 
            
            // 菜单宽度调整功能
            let isResizing = false;
            let lastDownX = 0;
            
            resizeHandle.addEventListener('mousedown', function(e) {
                // 如果当前是折叠状态，先展开
                if (menuContainer.classList.contains('collapsed')) {
                    menuContainer.classList.remove('collapsed');
                    menuToggle.querySelector('.toggle-icon').textContent = '❮';
                }
                
                isResizing = true;
                lastDownX = e.clientX;
                originalWidth = menuContainer.offsetWidth; // 更新原始宽度
                document.body.style.cursor = 'col-resize';
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
                e.preventDefault();
            });
            
            function handleMouseMove(e) {
                if (!isResizing) return;
                
                const newWidth = e.clientX - menuContainer.offsetLeft;
                
                // 设置最小和最大宽度
                if (newWidth > 150 && newWidth < 500) {
                    menuContainer.style.width = newWidth + 'px';
                    originalWidth = newWidth; // 更新原始宽度
                }
            }
            
            function handleMouseUp() {
                isResizing = false;
                document.body.style.cursor = '';
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            }
            
            // 默认展开第一个菜单
            if (!menuContainer.classList.contains('collapsed')) {
                menuItems[0].classList.add('expanded');
            }
        });
    }
    
    function loadPage(subMenuId) {
        // 这里应该是实际加载内容的逻辑
        // 为了演示，我们只是显示不同的文本
        let content = `<h2>${subMenuId}</h2><p>这是 ${subMenuId} 页面的内容。</p>`;
        
        // 模拟一些特定页面内容
        switch(subMenuId) {
            case 'data-overview':
                content = `
                    <h2>数据概览</h2>
                    <p>显示系统数据的整体概览信息。</p>
                    <div style="height: 300px; background: #f5f5f5; display: flex; align-items: center; justify-content: center;">
                        数据图表区域
                    </div>
                `;
                break;
            case 'sys-user':
                content = `
                    <h2>用户管理</h2>
                    <table style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="background: #f2f2f2;">
                                <th style="padding: 8px; border: 1px solid #ddd;">ID</th>
                                <th style="padding: 8px; border: 1px solid #ddd;">用户名</th>
                                <th style="padding: 8px; border: 1px solid #ddd;">角色</th>
                                <th style="padding: 8px; border: 1px solid #ddd;">状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">1</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">admin</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">管理员</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">活跃</td>
                            </tr>
                            <tr>
                                <td style="padding: 8px; border: 1px solid #ddd;">2</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">user1</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">普通用户</td>
                                <td style="padding: 8px; border: 1px solid #ddd;">活跃</td>
                            </tr>
                        </tbody>
                    </table>
                `;
                break;
        } 
        pageContent.innerHTML = content;
    }
    
    initDesk();
    
    </script>
</body>
</html>